<template>
  <div class="hello">
    <el-row id="downMenu">
      <el-button
        type="info"
        icon="el-icon-setting"
        @click="laserDrawerVisible = true"
      >激光方案
      </el-button>
      <el-button
        type="info"
        icon="el-icon-setting"
      >基础信息 </el-button>
      <el-button
        type="info"
        icon="el-icon-setting"
      >货架信息 </el-button>
      <el-button
        type="info"
        icon="el-icon-setting"
        @click="vehiclesDrawerVisible = true"
      >车辆驱动
      </el-button>
      <el-button
        type="info"
        icon="el-icon-setting"
        @click="chargeStrategyDrawerVisible = true"
      >充电策略 </el-button>
      <el-button
        type="info"
        icon="el-icon-setting"
      >任务详情 </el-button>
      <el-button
        type="primary"
        style="margin-left: 30px"
        icon="el-icon-circle-plus-outline"
        round
        @click="collapseTrigger"
      />
    </el-row>
    <el-drawer
      :visible.sync="laserDrawerVisible"
      size="70%"
      :with-header="false"
    >
      <Laser
        :databaseInfo="databaseInfo"
        @getAllDataBaseInfo="getAllDataBaseInfo"
      />
    </el-drawer>
    <el-drawer
      :visible.sync="vehiclesDrawerVisible"
      size="65%"
      :with-header="false"
    >
      <Vehicle
        :databaseInfo="databaseInfo"
        @getAllDataBaseInfo="getAllDataBaseInfo"
      />
    </el-drawer>
    <el-drawer
      :visible.sync="chargeStrategyDrawerVisible"
      size="65%"
      :with-header="false"
    >
      <ChargeStrategy
        :databaseInfo="databaseInfo"
        @getAllDataBaseInfo="getAllDataBaseInfo"
      />
    </el-drawer>
  </div>
</template>

<script>
import $ from "jquery";
import api from "@/utils/api";
import Laser from "./base/Laser";
import Vehicle from "./base/Vehicle";
import ChargeStrategy from "./base/ChargeStrategy";
export default {
  name: "BottomMenu",
  components: {
    Laser,
    Vehicle,
    ChargeStrategy,
  },
  data() {
    return {
      databaseInfo: null,
      laserDrawerVisible: false,
      vehiclesDrawerVisible: false,
      chargeStrategyDrawerVisible: false,
    };
  },
  mounted() {
    this.getAllDataBaseInfo();
  },
  methods: {
    // 下面菜单隐显
    collapseTrigger(e) {
      let buttons = e.target.offsetParent.childNodes;
      for (let i = 0; i < buttons.length - 1; i++) {
        $(buttons[i]).toggle();
      }
    },
    // 加载数据库所有数据
    getAllDataBaseInfo() {
      api.getAllDataBaseInfo().then((res) => {
        this.databaseInfo = res.data;
      });
    },
  },
};
</script>
<style scoped>
#downMenu {
  height: 30px;
  position: fixed;
  padding-right: 1%;
  display: flex;
  justify-content: flex-end;
  width: 100%;
  bottom: 30px;
  z-index: 99;
}
#downMenu button {
  font-size: 16px;
  padding: 0 5px;
}
</style>
